<template>
    <div>
        <Title>京东待出库订单列表</Title>
        <NuxtLayout name="common">
            <div class="out-box mt-[30px]">
                <t-card title="待京东出库订单" :bordered="false">
                    <span v-if="isOrder">
                        <t-list>
                            <t-list-item v-for="(item, index) in orderList">
                                {{ item.content.username }} 的订单需要从京东出货
                                <template #action>
                                    <t-button theme="primary" hover="color" style="margin-left: 16px"
                                        @click="showOrderDetail(index)"> 详情 </t-button>
                                </template>
                            </t-list-item>
                        </t-list>
                    </span>
                    <span v-else>不存在待出库订单，无需操作</span>
                </t-card>
            </div>
            <client-only>
                <div class="dialog-box">
                    <t-dialog :visible="isShowDetail" width="50%" :close-btn="true" confirm-btn="出库" cancel-btn="取消"
                        :on-close="close" :on-confirm="confirmOutWarehouse">
                        <template #header>出库单</template>
                        <template #body>
                            <span class="text-lg block font-[600]">品名</span>
                            <span class="block" v-for="(item, index) in detailContent.data.goods_list">{{
                                item.goods_title
                            }}--------------{{ item.goods_size }}码----------------{{ item.goods_number }}件</span>
                            <span class="text-lg block font-[600]">收货信息</span>
                            <span class="block">收件人：{{ detailContent.data.content.username }}</span>
                            <span class="block">联系电话：{{ detailContent.data.content.phone }}</span>
                            <span class="block">收件地址：{{ detailContent.data.content.address }}</span>
                            <span class="text-lg block font-[600]">销售订单信息</span>
                            <span class="block">销售订单状态：已审核</span>
                            <span class="block">销售订单单号：{{ detailContent.data.sale.order_number }}</span>
                            <span class="block">销售订单时间：{{ detailContent.data.sale.order_time }}</span>
                            <span class="block">销售订单来源：{{ detailContent.data.sale.order_from }}</span>
                            <span class="text-lg block font-[600]">物流状态</span>
                            <span v-if="detailContent.data.out_warehouse.express_number === ''">
                                <span>暂未发货</span>
                                <span>京东单号：
                                    <t-input v-model="express_number" placeholder="请输入模拟京东单号"/>
                                </span>
                            </span>
                            <span v-else>
                                <span class="block">物流单号：{{ detailContent.data.out_warehouse.express_number }}</span>
                                <span class="block">物流出库时间：{{ detailContent.data.out_warehouse.out_time }}</span>
                            </span>
                        </template>
                    </t-dialog>
                </div>
            </client-only>
        </NuxtLayout>
    </div>
</template>

<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next';
import { onMounted, reactive, ref } from 'vue';

let date = new Date();
// 单号
const express_number = ref(`JD-${date.getFullYear()}${date.getMonth()+1}${date.getDate()}${Math.floor(Math.random()*10000)}`);

// 是否显示详情
const isShowDetail = ref(false);

// 详情内容
const detailContent = reactive({
    data: {
        content: {
            username: '张三',
            phone: '13800138000',
            address: '重庆市北碚区蔡家岗街道倍都佳园D区'
        },
        goods_list: [],
        sale: {
            order_number: '',
            order_time: '',
            order_from: ''
        },
        out_warehouse: {
            warehouse_name: '',
            out_number: '',
            out_time: '',
            express_number: '',
        }
    }
});

// 关闭dialog
const close = () => {
    isShowDetail.value = false
}


// 京东的订单
const isOrder = ref(false);
// 订单列表
const orderList = ref([]);
const __initiaze = () => {
    let orderTable = localStorage.getItem('orderTable') || [];
    if (orderTable === null) { // 本地无订单
        isOrder.value = false;
    } else { //存在本地订单
        orderTable = JSON.parse(orderTable);
        let tmp = [];
        orderTable.forEach(item => {
            if (item.out_warehouse.warehouse_name === 'jd') { // 京东出库列表
                tmp.push(item);
            }
        });
        orderList.value = tmp;
        isOrder.value = true;
        console.log(orderList.value);

    }
}


// 点击显示详情按钮
const showOrderDetail = (index) => {
    detailContent.data = orderList.value[index];
    isShowDetail.value = true
}

// 确认出库
const confirmOutWarehouse = () => {
    if(express_number.value === '') {
        MessagePlugin.error({
            content: "物流单号不能为空"
        })
        return;
    }

    // 获取本地订单
    let orderTable = localStorage.getItem('orderTable');
    orderTable = JSON.parse(orderTable);

    // 循环本地订单，找到当前选中订单
    orderTable.forEach(item => {
        if(detailContent.data.content.username === item.content.username) {
            item.out_warehouse.out_time = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
            item.out_warehouse.express_number = express_number.value
        }
    });

    // 重新写入数据库
    localStorage.setItem('orderTable', JSON.stringify(orderTable))

    MessagePlugin.success({
        content: '发货已成功'
    });

    
}

onMounted(() => {
    setInterval(() => {
        __initiaze()
    }, 5000)
})
</script>

<style scoped></style>